<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户中心 - E-Spider AI</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="../styles.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-gray-100">
    <div id="app">
        <!-- 导航栏 -->
        <nav class="fixed top-0 left-0 right-0 bg-gray-800 shadow-lg z-50">
            <div class="max-w-7xl mx-auto px-4">
                <div class="flex justify-between h-16">
                    <div class="flex items-center">
                        <!-- Logo -->
                        <div class="flex-shrink-0">
                            <div class="h-8 w-8">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="w-full h-full">
                                    <!-- 外圈蜘蛛网效果 -->
                                    <circle cx="50" cy="50" r="45" fill="none" stroke="#4F46E5" stroke-width="2" />
                                    <circle cx="50" cy="50" r="35" fill="none" stroke="#4F46E5" stroke-width="1.5" opacity="0.7" />
                                    <circle cx="50" cy="50" r="25" fill="none" stroke="#4F46E5" stroke-width="1" opacity="0.5" />
                                    
                                    <!-- 放射状线条 -->
                                    <line x1="50" y1="5" x2="50" y2="20" stroke="#4F46E5" stroke-width="1.5" />
                                    <line x1="95" y1="50" x2="80" y2="50" stroke="#4F46E5" stroke-width="1.5" />
                                    <line x1="50" y1="95" x2="50" y2="80" stroke="#4F46E5" stroke-width="1.5" />
                                    <line x1="5" y1="50" x2="20" y2="50" stroke="#4F46E5" stroke-width="1.5" />
                                    
                                    <!-- E字母 -->
                                    <path d="M40 35 L60 35 M40 35 L40 65 M40 50 L55 50 M40 65 L60 65" 
                                          stroke="#4F46E5" 
                                          stroke-width="4" 
                                          stroke-linecap="round"
                                          fill="none" />
                                    
                                    <!-- 小蜘蛛图案 -->
                                    <circle cx="65" cy="40" r="3" fill="#4F46E5" />
                                    <line x1="65" y1="37" x2="65" y2="33" stroke="#4F46E5" stroke-width="1" />
                                    <line x1="62" y1="40" x2="58" y2="40" stroke="#4F46E5" stroke-width="1" />
                                    <line x1="68" y1="40" x2="72" y2="40" stroke="#4F46E5" stroke-width="1" />
                                </svg>
                            </div>
                        </div>
                        <!-- 导航链接 -->
                        <div class="hidden md:block">
                            <div class="ml-10 flex items-baseline space-x-4">
                                <a href="#" onclick="switchPage('bots')" class="text-white px-3 py-2 rounded-md text-sm font-medium nav-link active">AI Bot应用</a>
                                <a href="#" onclick="switchPage('knowledge')" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium nav-link">知识库管理</a>
                                <a href="#" onclick="switchPage('channels')" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium nav-link">渠道管理</a>
                            </div>
                        </div>
                    </div>
                    <!-- 用户信息 -->
                    <div class="flex items-center">
                        <div class="ml-4 flex items-center md:ml-6">
                            <div class="ml-3 relative">
                                <div class="flex items-center">
                                    <span id="userEmail" class="text-sm text-gray-300 mr-2">user@example.com</span>
                                    <button onclick="toggleUserMenu()" class="bg-gray-700 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                                        <span class="sr-only">打开用户菜单</span>
                                        <div id="userAvatar" class="h-8 w-8 rounded-full bg-gray-600 flex items-center justify-center">
                                            <i class="fas fa-user text-gray-300"></i>
                                        </div>
                                    </button>
                                </div>
                                <!-- 用户菜单 -->
                                <div id="userMenu" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-gray-700 ring-1 ring-black ring-opacity-5">
                                    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                                        <a href="#" onclick="logout()" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white" role="menuitem">
                                            <i class="fas fa-sign-out-alt mr-2"></i>登出
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8 mt-16">
            <!-- 嵌入页面的内容 -->
            <iframe id="contentFrame" class="w-full min-h-screen border-none" src="bots.html"></iframe>
        </main>
    </div>

    <style>
        .nav-link.active {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
        }
    </style>

    <script>
        // 获取当前页面 URL 中的参数
        const urlParams = new URLSearchParams(window.location.search);
        const email = urlParams.get('email');
        
        // 如果有邮箱参数，更新显示在右上角
        if (email) {
            document.getElementById('userEmail').textContent = email;
        }

        // 从 localStorage 获取用户头像
        const userPicture = localStorage.getItem('userPicture');
        if (userPicture) {
            const userAvatar = document.getElementById('userAvatar');
            userAvatar.innerHTML = `<img src="${userPicture}" alt="用户头像" class="h-8 w-8 rounded-full">`;
        }

        // 切换页面内容
        function switchPage(page) {
            // 更新 iframe 源
            document.getElementById('contentFrame').src = page + '.html';
            
            // 更新导航链接样式
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            event.target.classList.add('active');
        }

        // 切换用户菜单显示/隐藏
        function toggleUserMenu() {
            const menu = document.getElementById('userMenu');
            menu.classList.toggle('hidden');
        }

        // 点击页面其他地方关闭用户菜单
        document.addEventListener('click', function(event) {
            const menu = document.getElementById('userMenu');
            const userButton = event.target.closest('button');
            if (!userButton && !menu.classList.contains('hidden')) {
                menu.classList.add('hidden');
            }
        });

        // 登出功能
        function logout() {
            // 清除本地存储的用户信息
            localStorage.removeItem('userEmail');
            localStorage.removeItem('userName');
            localStorage.removeItem('userPicture');
            
            // 跳转到首页
            window.location.href = '../index.html';
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 默认选中 AI Bot应用
            document.querySelector('.nav-link').classList.add('active');
        });
    </script>
</body>
</html> 